/**
 * 初识渲染器
 */
;(function () {

    // 虚拟 DOM
    const vnode = {
        tag: 'dvi',
        props: {
            onClick: () => {
                alert('hello')
            }
        },
        children: 'click me'
    }

    // 渲染器
    function renderer(vnode, container) {
        const el = document.createElement(vnode.tag)
        // 遍历 vnode.props,将属性、事件、添加到 DOM 元素
        for (const key in vonde.props) {
            if (/^on/.test(key)) {
                el.addEventListener(key.substring(2).toLowerCase(), vnode.props[key])
            }
        }

        // 处理 children
        if (typeof vnode.children === 'string') {
            el.appendChild(document.createTextNode(vnode.children))
        } else if (Array.isArray(vnode.children)) {
            vnode.children.forEach(child => {
                renderer(child, el)
            })
        }
        container.appendChild(el)
    }

})()

